<template>
  <div id="waiterDetails">
    <!-- <h3>这是员工详情页面</h3> -->
    <el-link type="primary" class="back" @click="back">返回</el-link>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div class="face_top">
          <p class="face" />
          <h2>{{ baseInfo.realname }}</h2>
          <p>海纳百川,有容乃大</p>
        </div>
        <p>联系方式：{{ baseInfo.telephone }}</p>
        <p>状态：{{ baseInfo.status }}</p>
        <p>地址：{{ baseInfo.province }}{{ baseInfo.city }}</p>
        <hr>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="second">
        <el-table :data="orderInfo" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="180" align="center" />
          <el-table-column prop="orderTime" label="下单时间" align="center" />
          <el-table-column prop="total" label="总价" align="center" />
          <el-table-column prop="status" label="状态" align="center" />
          <el-table-column prop="customerId" label="顾客ID" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="details(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="收益信息" name="third">
        <el-table :data="serveInfo" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="180" align="center" />
          <el-table-column prop="money" label="金额" align="center" />
          <el-table-column prop="description" label="描述" align="center" />
          <el-table-column prop="transactionTime" label="订单时间" align="center" />
        </el-table>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseInfo: {},
      orderInfo: [],
      serveInfo: [],
      activeName: 'first'
    }
  },
  created() {
    // alert(this.$route.query.id);
    // 查询基本信息
    this.$axios.get('/waiter/findWaiterById', {
      params: {
        id: this.$route.query.id
      }
    }).then(res => {
      // console.log(res);
      this.baseInfo = res.data.data
    })
    // 查询订单信息
    // alert(this.$route.query.id);
    this.$axios.get('/order/query', {
      params: {
        waiterId: this.$route.query.id
      }
    }).then(res => {
      // console.log(res);
      this.orderInfo = res.data.data
    })
    // 查询收益信息
    this.$axios.get('/waiter/detailsShou', { params: {
      id: this.$route.query.id
    }}).then(res => {
      this.serveInfo = res.data.data
      console.log(this.serveInfo)
    })
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 给返回按钮绑定事件
    back() {
      this.$router.back()
    },
    // 给详情按钮绑定事件
    details(id) {
      //  alert(id);
      this.$router.push({ path: '/innerdetails/index', query: { id: id }})
    }
  }

}
</script>
<style lang="scss" scoped>
    #waiterDetails{
        padding: 30px;
        .back{
            font-size: 14px;
            padding-bottom: 20px;
        }
        .face_top{
            margin-left: 117px;
            margin-top: 22px;
            .face{
                width: 120px;
                height: 120px;
                line-height: 120px;
                border-radius: 50%;
                background-color: #c0c4cc;
            }

        }
        hr{
            color: #c0c4cc;
            border: 1px solid #c0c4cc;
            font-weight: 100;
        }

    }
</style>
